<template>
  <div class="flexrow flexrow2">
    <div>
      <el-select
        v-model="first_val"
        :disabled="disabled"
        filterable
        placeholder="请选择"
        @change="handleChange"
      >
        <el-option
          v-for="item in first_opt"
          :key="item"
          :label="item"
          :value="item"
        >
        </el-option>
      </el-select>
    </div>
    <div>
      <el-select
        v-model="second_val"
        :disabled="disabled"
        filterable
        placeholder="请选择"
        @change="secondChange"
      >
        <el-option
          v-for="(item, index) in second_opt"
          :key="index"
          :label="item"
          :value="item"
        >
        </el-option>
      </el-select>
    </div>
    <div>
      <el-select
        v-model="three_val"
        :disabled="disabled"
        filterable
        placeholder="请选择"
        @change="threeChange"
      >
        <el-option
          v-for="item in three_opt"
          :key="item"
          :label="item"
          :value="item"
        >
        </el-option>
      </el-select>
    </div>
  </div>
</template>
<script>
import axios from "axios";
import {queryPaymentTypeDicListApi} from '@/api/common.js'
export default {
  name: "WKPaymentSelect",
  props: {
    editVal: {//控制回显
      type: String,
    },
    formType: {//判断数据类型 目前是行业跟专业
      type: String,
    },
    valHan: { //数据处理连接符 不设置默认以|分割数据
      type: String,
      default: "|",
    },
    disabled: { 
      type: Boolean,
      default: false,
    },
  },
  data() {
    return {
      first_opt: [],//一级菜单
      first_val: "",//一级菜单选中值
      second_opt: [],//二级菜单
      second_val: "",//二级菜单选中值
      three_opt: [],//三级菜单
      three_val: "",//三级菜单选中值
      firstArr: [],//一级菜单源数据
      secondArr: [],//二级菜单源数据
      threeArr:[], // 三级菜单源数据
      editShow: false,//控制回显时的编辑联动效果清理
      arr: [],
      first_num: 0,
      second_num:0,
    }
  },
  async created() {
    await this.getPaymentTypeDicList();
    //获取数据渲染
    if (this.editVal) {//回显处理
      this.initEditVal();
    }
  },
  watch: {
    editVal(){
      this.initEditVal();
    },
    first_val(nVal, oVal) {//一级菜单改变联动展示二级对应值
      this.second_opt = [];
      this.secondArr = [];
      this.second_val= "";
      if (nVal == oVal) return;
      if (!this.editShow) this.second_val = "";
      // this.second_opt = this.secondArr[nVal];
      this.first_opt.forEach((item,index) => {
        if(item == this.first_val){
          this.first_num = index;
          this.arr[this.first_num].childList.forEach((secondItem,secondIndex) => {
            this.second_opt.push(secondItem.paymentName)
            this.secondArr.push(secondItem)
          })
        }
      })
      if (this.editShow) {
        let second = "";
        // let val =this.handleData(this.editVal.split("|"));
        let val =this.editVal.split("|");
        for (let i = 0; i < this.second_opt.length; i++) {
          const i_obj = this.second_opt[i];
          if (i_obj == val[1]) second = i_obj;
        }
        this.second_val = second;
        // this.editShow = false;
      }
    },
    second_val(nVal, oVal) {//二级菜单改变联动展示三级对应值
      this.three_opt = [];
      this.threeArr = [];
      this.three_val= "";
      if (nVal == oVal) return;
      if (!this.editShow) this.three_val = "";
      // this.second_opt = this.secondArr[nVal];
      this.second_opt.forEach((item,index) => {
        if(item == this.second_val){
          this.second_num = index;
          this.secondArr[this.second_num].childList.forEach((threeItem,threeIndex) => {
            this.three_opt.push(threeItem.paymentName)
            this.threeArr.push(threeItem)
          })
        }
      })
      // console.log('三级联动',this.threeArr)
      if (this.editShow) {
        let three = "";
        let val =this.editVal.split("|");
        for (let i = 0; i < this.three_opt.length; i++) {
          const i_obj = this.three_opt[i];
          if (i_obj == val[2]) three = i_obj;
        }
        this.three_val = three;
        this.editShow = false;
      }
    },
  },
  methods: {
    async getPaymentTypeDicList () {
      const {data} = await queryPaymentTypeDicListApi()
      this.arr = JSON.parse(data)
      if(this.arr&&this.arr.length>0){
        this.arr.forEach((item,index) => {
          this.first_opt.push(item.paymentName)
        });
      }
    },
    initEditVal(){
      this.editShow = true;
      // let val =this.handleData(this.editVal.split("|"));
      let val =this.editVal.split("|");
      if(!val) return;
      let first = "";
      let second = "";
      let three = "";
      // const newArr = JSON.parse(JSON.stringify(this.first_opt));
      for (let i = 0; i < this.first_opt.length; i++) {//筛选对应值
        const i_obj = this.first_opt[i];
        if (i_obj == val[0]) {
          first = i_obj;
        };
      }
      for (let i = 0; i < this.second_opt.length; i++) {//筛选对应值
        const i_obj = this.second_opt[i];
        if (i_obj == val[1]) {
          second = i_obj;
        };
      }
      for (let i = 0; i < this.three_opt.length; i++) {//筛选对应值
        const i_obj = this.three_opt[i];
        if (i_obj == val[2]) {
          three = i_obj;
        };
      }
      this.first_val = first;
      this.second_val = second;
      this.three_val = three;
    },
    handleChange (e){
      this.second_opt = [];
      this.second_val= "";
      this.first_opt.forEach((item,index) => {
        // console.log(2222,this.first_opt)
        if(item == this.first_val){
          this.first_num = index;
          this.arr[this.first_num].childList.forEach((secondItem,secondIndex) => {
            this.second_opt.push(secondItem.paymentName)
          })
        }
      })
      let val = this.first_val
      this.$emit("stageSearch", val);
    },
    secondChange (e){
      this.three_opt = [];
      // console.log(this.secondArr)
      this.second_opt.forEach((item,index) => {
        if(item == this.second_val){
          this.second_num = index;
          this.secondArr[this.second_num].childList.forEach((threeItem,threeIndex) => {
            this.three_opt.push(threeItem.paymentName)
          })
        }
      })
      let val = this.first_val + this.valHan + this.second_val
      this.$emit("stageSearch", val);
    },
    threeChange (e){
      let val = this.first_val + this.valHan + this.second_val+this.valHan+this.three_val;
      this.$emit("stage", val);
    },
        //处理数据结果，多个|分割数据时，处理成两个
    handleData(val) {
      if (val.length > 2) {
        const len = val.length;
        const v = val[len - 1];
        var _arr = val;
        _arr.length = len - 1;
        let n_arr = [];
        n_arr.push(_arr.join("|"));
        n_arr.push(v);
        val = n_arr;
      }
      return val;
    },
  }
}
</script>
<style scoped lang="scss">
.flexrow {
  display: flex;
  flex-direction: row;
  >div{
    margin-right: 8px;
  }
  >div:last-child{
    margin-right: 0;
  }
}
</style>